<template>
    <div class='fxn-body'>
        <Searchs v-model:searchData="searchData" v-model:SearchForm="SearchForm" @handleSearch="handleSearch"></Searchs>
        <!-- Search End -->
        <div class="fxn-top" v-if="authMenu('sys_user_add')">
            <el-button type="primary" icon="Plus" @click="handleOp(1)">添加</el-button>
        </div>
        <!-- Top End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table v-loading="loading" :data="listData">
                <el-table-column label="ID" prop="id" width="80" />
                <el-table-column label="用户名" prop="user_name" />
                <el-table-column label="姓名" prop="real_name" />
                <el-table-column label="手机号码" prop="phone" />
                <el-table-column label="工号" prop="user_no" />
                <el-table-column label="状态" prop="status" width="80">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" :disabled="!authMenu('sys_user_statuc') || scope.row.role == 1" @change="handleStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="登录次数" prop="login_times" width="90" />
                <el-table-column label="最近登录时间" prop="login_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.login_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" prop="add_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.add_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-link v-if="authMenu('sys_user_edit')" type="primary" :underline="false" @click="handleOp(2,scope.row)">编辑</el-link>
                        <el-link v-if="scope.row.role == 0 && authMenu('sys_user_pw')" type="primary" :underline="false" @click="handlePw(scope.row)">重置密码</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->

        <!-- 操作 -->
        <dialogForm ref="dialogData" :opDialog="formDialog" :formData="formData" @handleDialog="handleDialog"></dialogForm>
        <!-- 操作 End -->
    </div>
</template>

<script>
    import Searchs from '../Common/Search.vue'
    import dialogForm from '../Common/Form.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {Searchs,dialogForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                listData: [],

                depData: [],

                //搜索
                SearchForm: {
                    user_name: '',
                    phone: '',
                    status: '',
                },
                searchData: [
                    {label: '用户名', prop: 'user_name', type: 'input'},
                    {label: '手机号码', prop: 'phone', type: 'input'},
                    {label: '状态', prop: 'status', type: 'select', data: [{value: 0, label: '禁用'}, {value: 1, label: '启用'}], selectlabel: 'label', selectvalue: 'value'},
                ],

                //操作
                formDialog: false,
                formData: {
                    inline: false,
                    width: '800',
                    labelWidth: '120',
                    data: [
                        {formType: 'input', span: 12, label: '用户名', prop: 'user_name', rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }], placeholder: '请输入用户名'},
                        {formType: 'input', span: 12, label: '姓名', prop: 'real_name', rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }], placeholder: '请输入姓名'},
                        {formType: 'input', span: 12, label: '手机号码', prop: 'phone', maxlength: '11', rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }], placeholder: '请输入手机号码'},
                        {formType: 'input', span: 12, label: '工号', prop: 'user_no', placeholder: '请输入工号'},
                        {formType: 'cascade', span: 12, label: '部门名称', prop: 'department_id', data: [], props: {value: 'id', label: 'name', children: 'children'}, rules: [{ required: true, message: '请选择部门名称', trigger: 'blur' }], placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '角色名称', prop: 'group_id', data: [], rules: [{ required: true, message: '请选择角色名称', trigger: 'blur' }], selectlabel: 'label', selectvalue: 'value', placeholder: '请选择'},
                        {formType: 'input', span: 24, type: 'textarea', rows: 5, label: '备注', prop: 'remark', placeholder: '请输入备注'},
                    ]
                },
            })

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/oa/user/index',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    user_name: state.SearchForm.user_name,
                    phone: state.SearchForm.phone,
                    status: state.SearchForm.status,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //打开操作
            const handleOp = (type,row) => {
                if(type == 1){
                    let array = state.formData.data;
                    array.forEach((item)=> {
                        if(item.prop == 'user_name'){
                            item.disabled = false
                        }
                        if(item.prop == 'phone'){
                            item.disabled = false
                        }
                        if(item.prop == 'department_id'){
                            item.data = computed(() => store.state.depData)
                        }
                        if(item.prop == 'group_id'){
                            item.data = computed(() => store.state.groupData)
                        }
                    })
                    state.formData.data = array;
                    state.formData = {
                        ...state.formData,
                        title: '添加',
                    }
                }else{
                    //遍历并添加disabled= true;
                    let array = state.formData.data;
                    array.forEach((item)=> {
                        if(item.prop == 'user_name'){
                            item.disabled = true
                        }
                        if(item.prop == 'phone'){
                            item.disabled = true
                        }
                        if(item.prop == 'department_id'){
                            item.data = computed(() => store.state.depData)
                        }
                        if(item.prop == 'group_id'){
                            item.data = computed(() => store.state.groupData)
                        }
                    })
                    state.formData.data = array;
                    proxy.$http.get('/oa/user/op',{id: row.id})
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            data.department_id = Number(data.department_id);
                            data.group_id = Number(data.group_id);
                            state.formData = {
                                ...state.formData,
                                title: '编辑',
                                model: data
                            }
                        }
                    })
                }
                proxy.$refs.dialogData.openDialog();
            }

            //提交操作
            const handleDialog = (e) => {
                let department_id = String(e.department_id);
                e.department_id = department_id[department_id.length-1];
                proxy.$http.post('/oa/user/op', e)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        getList(state.page,state.perPage);
                    }
                })
            }

            //修改状态
            const handleStatus = (row) => {
                proxy.$http.post('/oa/User/state',{id: row.id, status:row.status})
                .then(res=>{
                    const { code, msg , data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('修改成功!');
                        getList(state.page,state.perPage);
                    }
                })
            }

            //修改密码
            const handlePw = (row) => {
                proxy.$confirm("此操作会将该用户密码重置为: 123456, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                    proxy.$http.post('/oa/User/resetPassword',{id: row.id})
                    .then(res=> {
                        let { code, msg, data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            proxy.$msg.success('提交成功!');
                            getList(state.page,state.perPage);
                        }
                    })
                })
                .catch(() => {})
            }

            //搜索
            const handleSearch = (e) => {
                state.SearchForm = e;
                getList(1,10);
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleOp,
                handleDialog,
                handleStatus,
                handlePw,
                handleSearch,
                
                //组件方法
                authMenu,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>